<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment :: common_head(~{::meta},~{::title},~{::link},~{},~{::script})">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JqueryUI ProgressBar Demo 2</title>
    <link href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $('#data-sync').click(function () {
                // ajax 轮询
                // 显示进度条
                pro.show();

                return false;
            });
            var pro = $("#progressbar");   //进度条div
            var proLabel = $(".progress-label"); //进度条里面文字
            // 开始隐藏进度条
            pro.hide();

            pro.progressbar({
                value: false,   //初始化的值为0
                change: function () {
                    //当value值改变时，同时修改label的字
                    proLabel.text(pro.progressbar("value") + "%");
                },
                complete: function () {
                    //当进度条完成时，显示complate
                    proLabel.text("Complete!");
                }
            });

            //延迟500毫秒调用修改value的函数
            setTimeout(addValue, 500);

            //动态修改value的函数
            function addValue() {
                var pro = $("#progressbar");
                var newValue = pro.progressbar("value") + 1;

                pro.progressbar("value", newValue); //设置新值
                if (newValue >= 100) {
                    return;
                }    //超过100时，返回

                setTimeout(addValue, 500); //延迟500毫秒递归调用自己
            }
        });
    </script>
</head>
<body>
<header id="header" th:replace="fragment :: header"></header>
<div id="content">
    <p><a id="data-sync" href="" th:href="@{/progress/demo1}">数据同步</a></p>
    <!-- 进度条 -->
    <div id="progressbar">
        <div class="progress-label">Loading...</div>
    </div>
</div>
<footer id="footer" th:replace="fragment :: footer"></footer>
</body>
</html>